<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/css/cashier.css?v1"/>
    <link rel="stylesheet" href="/css/daily.css?v1"/>
    <script>
        if (typeof module === 'object') {
            window.module = module;
            module = undefined;
        }
    </script>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="/js/json2.js"></script>
    <script type="text/javascript" src="/js/common.js?v8"></script>
    <script type="text/javascript" src="/js/ff.js"></script>
    <script>
        if (window.module) {
            module = window.module;
        }
    </script>
    <script type="text/javascript" src="/js/electron/printer.js"></script>
</head>

<body class="pc">
<div class="header-bar">
        <span class="left">饭否前台管理系统</span>
        <!--<span class="right"><a href="/logout?from=cashier">退出</a></span>-->
        <span class="right"><a href="/cashier_login">退出</a></span>
</div>
<div class="cashier-content">
    <div class="nav-bar">
        <ul class="nav-menus">
            <li id="nav-tables" class="nav-menus-item"><a href="#action=tables">台桌</a></li>
            <li id="nav-orders" class="nav-menus-item"><a href="#action=orders">订单管理</a></li>
            <li id="nav-daily" class="nav-menus-item"><a href="#action=daily">每日流水</a></li>
        </ul>
    </div>
    <div id="cashier-content" class="nav-content">

    </div>
</div>

<script >

    window.storeId = 5;
    window.userId = 101;

    var snippet = {
        'tabPages':{'tables':'','orders':'','daily':''},
        'tables':'/cashier/tables.html',
        'orders':'/cashier/orders.html',
        'daily':'cashier/statistics.html', //日常流水统计
        'orderDetail':'/cashier/order_detail.html'
    };

    var $content = $('#cashier-content');

    var action;

    /**
     * 获取path中hash值action对应的值
     * http://localhost:3004/cashier/index#action=daily 返回 daily
     * @returns {*|string}
     */
    function getAction(){
        return common.parseHash().action;
    }

    /**
     * 设置选中的tab
     * @param index
     */
    function setSelection(tabAction){
        tabAction = tabAction || 'tables';
        if(tabAction in snippet.tabPages){ //是否需要更改标签色
            $('.nav-menus .nav-menus-item').removeClass('selected');
            $('#nav-'+tabAction).addClass('selected');
        }
        showTabPage(tabAction);
    }

    var indexSeed = 10;
    var $frontPage;
    /**
     * 根据action的值，显示对应的页面
     */
    function showTabPage(action) {
        var id = 'page-'+action;
        var $page = $('#'+id);
        if(!$page.length){
            var $wrapper = $('<div></div>').attr('id',id).attr('action',action).addClass('cashier-content-page').hide();
            var url = snippet[action];
            $wrapper.load(url,'_v=2',function(text,status){
                if(action in snippet.tabPages)
                    $('.cashier-content-page').fadeOut();
                $content.append($wrapper);
                $wrapper.css({'z-index':indexSeed++}).fadeIn()
                $frontPage = $wrapper;
            });
        }else{

            var beforeAction = $frontPage.attr('action');
            if(beforeAction in snippet.tabPages){
                if(beforeAction != action)
                    $frontPage.fadeOut(function(){
                        //显示当前页
                        if($page.is(':hidden')){
                            //显示
                            $page.css({'z-index':indexSeed++}).fadeIn();
                        }
                    });
            }else{
                $frontPage.remove();
                //显示当前页
                if($page.is(':hidden')){
                    //显示
                    $page.css({'z-index':indexSeed++}).fadeIn();
                }
            }
            $frontPage = $page;
        }
    }


    /**
     * 监听hash值改变
     */
    window.onhashchange = function(){
        browserAction();
    }

    /**
     * 根据hash显示当前页面
     */
    function browserAction(){
        var newAction = getAction();
        if(!newAction){
            action = 'tables';
        }else if(action === newAction){
            return;
        }else{
            action = newAction;
        }
        console.log('action = ' + action);
        if(action in snippet.tabPages){
            setSelection(action);
        }else{
            //tab选中项不变，只改变显示类容
            var id = 'page-'+action;
            $('#'+id).remove();
            var $wrapper = $('<div></div>').attr('id',id).attr('action',action).addClass('cashier-content-page').hide();
            var url = snippet[action];
            $wrapper.load(url,'_v=1',function(text,status){

                console.log(status);

                $content.append($wrapper);
                $wrapper.css({'z-index':indexSeed++}).fadeIn()
                $frontPage = $wrapper;
            });
        }

    }

    browserAction();

</script>

</body>

</html>